<script setup lang="ts">
import { ref } from 'vue'
import PlayTest from './components/PlayTest.vue'
/*
  ref:
     1:定义响应式数据
       const num=ref(0)
       num.value
     2：获取dom
       <div>...</div>
     3:获取组件实例

*/
// const divDom=ref(null/undefined/不写)
// 获取dom
const divDom = ref<HTMLDivElement | undefined>()
const getDom = () => {
  console.log(divDom.value)
}
// 获取组件实例  InstanceType<typeof PlayTest>  这种适用于自己定义的组件处理类型
const instanceCom = ref<InstanceType<typeof PlayTest> | undefined>()
const getCom = () => {
  console.log(instanceCom.value?.num)
}
</script>

<template>
  <div class="ref-page">ref</div>
  <div ref="divDom">获取dom</div>
  <button @click="getDom">获取div的dom</button>
  <PlayTest ref="instanceCom"></PlayTest>
  <button @click="getCom">获取组件实例</button>
</template>

<style lang="scss" scoped></style>
